@import 'public';


header {
    display: block;
    background-color: @red;
    padding-top: 1px;
    height: 33.8rem;
    .search-box {
        box-sizing: border-box;
        height: 6.2rem;
        line-height: 6.2rem;
        padding-left: 11.5rem;
        margin-top:  2rem;
        font-size: 2.8rem;
        color: #bababa;
        background: white;
        border-radius: 3.1rem;
        position: relative;
        &::after {
            content: '';
            display: block;
            width: 2.8rem;
            height: 2.8rem;
            background-image: url(https://img.imgdb.cn/item/6033224d5f4313ce2575d578.png);
            background-repeat: no-repeat;
            background-size: 2.8rem 2.8rem;
            position: absolute;
            left: 5rem;
            top: 2rem;
        }
    }
    .nav {
        margin-top: 3rem;
        overflow: hidden;
        ul {
            display: flex;
            padding: 0;
            position: relative;
            li {
                font-size: 2.8rem;
                color: white;
                margin-right: 5rem;
                flex-shrink: 0;
                position: relative;
                height: 5.2rem;
                line-height: 4.2rem;
                &.active {
                    font-size: 3.2rem;
                    font-weight: bold;
                }
                &.active:after {
                    content: '';
                    display: block;
                    width: 2.4rem;
                    height: 0.4rem;
                    background-color: white;
                    border-radius: 0.2rem;
                    position: absolute;
                    top: 4.6rem;
                    left: 2rem;
                }
            }
        }
    }
    .swipe-box {
        margin-top: 1.5rem;
    }
}

.icon-nav {
    margin-top: 7rem;
    display: flex;
    flex-wrap: wrap;

    li {
        width: 14.2rem;
        flex-shrink: 0;
        height: 14.8rem;
        a {
            display: block;
            text-align: center;
            text-decoration: none;
            img {
                display: inline-block;
                width: 8.4rem;

            }
            span {
                display: block;
                height: 6.4rem;
                line-height: 6.4rem;
                font-size: 2.4rem;
                color: #404040;
            }
        }
    }
}

.ad-box01 {
    >a {
        display: block;
        img {
            display: block;
            width: 100%;
        }
    }
    ul {
        display: flex;
        justify-content: space-between;
    }
    .ul01 {
        margin-top: 2rem;
        li {
            width: 34.8rem;
            height: 16.4rem;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .ul02 {
        margin-top: 2rem;
        li {
            width: 22.6rem;
            height: 24rem;
            img {
                display: block;
                width: 100%;
            }
        }
    }
}

.single-01 {
    margin-top: 2rem;
    background-color: #fde9e8;
    height: 35.6rem;
    >.title {
        box-sizing: border-box;
        width: 41.5rem;

        height: 7.6rem;
        background-image: url(https://img.imgdb.cn/item/6033692f5f4313ce259f2eb8.png);
        background-size: contain;
        background-repeat: no-repeat;
        padding-top: 1.2rem;
        padding-left: 2rem;
        p, .time, .fg {
            display: inline-block;
            vertical-align: middle;
        }
        p {
            font-size: 3.4rem;
            color: white;
            font-weight: bold;
            margin-right: 2rem;
        }
        .time {
            background-color: white;
            width: 3.8rem;
            height: 3.4rem;
            line-height: 3.4rem;
            text-align: center;
            color: @red;
            font-size: 2.4rem;
            font-weight: bold;
        }
        .fg {
            color: white;
            font-size: 2.4rem;
        }
    }
    >ul {
        display: flex;
        justify-content: center;
        margin-top: 
        4rem;
        li {
            box-sizing: border-box;
            margin: 0 .6rem;
            width: 14rem;
            height: 20.8rem;
            background-color: white;
            border-radius: 0.8rem;
            a {
                display: block;
                // flex-direction: column;
                // justify-content: flex-end;
                // align-items: center;
                text-align: center;
                padding-top: 2.5rem;
                position: relative;
                img {
                    display: inline-block;
                    width: auto;
                    height: 10.4rem;
                    margin-bottom: 1rem;
                }
                strong {
                    display: block;
                    font-size: 2.4rem;
                    color: #141414;
                }
                span {
                    display: block;
                    font-size: 2rem;
                    color: #929292;
                    text-decoration: line-through;
                }
                button {
                    display: block;
                    margin: 0 auto;
                    width: 16.7rem;
                    height: 4.2rem;
                    line-height: 4.2rem;
                    background-color: #ff6436;
                    border-radius: 2.1rem;
                    outline: none;
                    border: none;
                    font-size: 2rem;
                    color: white;
                }
            }
            &.last {
                width: 20rem;
                height: 29.8rem;
                position: relative;
                top: -9rem;
                img {
                    width: 55%;
                    height: auto;
                    margin-bottom: 4rem;
                }
            }
        }
    }
}

.type-box {
    margin-top: 3rem;
    ul {
        display: flex;
        justify-content: center;
        li {
            width: 16rem;
            height: 8rem;
            position: relative;
            flex-shrink: 0;
            img {
                display: inline-block;
                margin-left: 3rem;
                width: 3.5rem;
                
            }
            p {
                display: block;
                width: 100%;
                height: 3rem;
                line-height: 3rem;
                font-size: 2.6rem;
                color: #333;
                font-weight: bold;
                position: absolute;
                top: 0;
                text-align: center;
            }
            span {
                display: block;
                text-align: center;
                font-size: 2rem;
                color: #6d6d6d;
                font-weight: bold;
            }
            &::after {
                content: "";
                display: block;
                width: .2rem;
                height: 3.4rem;
                background-color: #f4f4f4;
                position: absolute;
                right: 0;
                top: 1.8rem;
            }
        }
    }
}

.product-list {
    padding-top: 2.5rem;
    display: flex;
    justify-content: space-between;
    .left {
        width: 34.5rem;
        li {
            // height: 56rem;
            width: 100%;
            border-radius: .8rem;
            margin-bottom: 2rem;
            img {
                display: block;
                width: 100%;
            }
        }
    }
    .right {
        width: 34.5rem;
        li {
            box-sizing: border-box;
            background-color: white;
            height: 50.2rem;
            width: 100%;
            margin-bottom: 2rem;
            padding-top: 5rem;
            a {
                img 
                {
                       display: block;
                       width: 80%;
                       margin: 0 auto;
                }
                .product-des {
                    width: 100%;
                    padding: 1.5rem 2rem;
                    
                   >span , .title {
                       display: inline-block;
                       margin: 0;
                       padding: 0;
                   }
                   >span {
                       width: 5rem;
                       height: 2.8rem;
                       line-height: 2.8rem;
                       font-size: 1.8rem;
                       background-color: #f55519;
                       text-align: center;
                       border-radius: .5rem;
                       color: white
                   }
                   .title {
                        font-size: 2.5rem;
                        color: #2f2f2f;
                        margin-left: 1rem;
                        width: 24.5rem;
                        height: 2.8rem;
                        line-height: 2.8rem;
                        overflow: hidden;
                        vertical-align: top;
                        overflow:hidden; //文字长度超出限定宽度，则隐藏超出的内容）
                        text-overflow:ellipsis;//（设置文字在一行显示，不能换行）
                        white-space:no-wrap;//（规定当文本溢出时，显示省略符号来代表被修剪的文本）
                   }
                   .huodong {
                       margin-top: 1.5rem;
                       margin-left: .7rem;
                       >span {
                            box-sizing: border-box;
                            display: inline-block;
                            height: 3.4rem;
                            line-height: 3.4rem;
                            border-top: 2px solid #d69993;
                            border-bottom: 2px solid #d69993;
                            position: relative;
                            margin-right: 2.1rem;
                            font-size: 1.8rem;
                            color:#d53128;
                            &::before,&::after {
                                content: "";
                                display: inline-block;
                                width: .7rem;
                                height: 3.4rem;
                                vertical-align: top;
                                position: relative;
                                top: -.2rem;
                            }
                            &::before {
                                background-image: url(https://img.imgdb.cn/item/6034609e5f4313ce2509d6ec.png);
                                left: -.7rem;
                            }
                            &::after {
                                background-image: url(https://img.imgdb.cn/item/6034609e5f4313ce2509d6e3.png);
                                left: .7rem;
                            }
                       }

                   }
                   .price {
                       font-size: 3.2rem;
                       color: #f55519;
                       margin-top: 2.5rem;
                       height: 4rem;
                       line-height: 4rem;
                       font-weight: bold;
                   }
                }
            }
        }
    }

}